<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/public/Header::head('总体信息')"></head>
<body>
<div th:include="include/main/mainTop.html"></div>
<div class="row main_container">
    <div class="col-sm-2 col_nav">
        <div class="accordion" id="accordionNav">
            <div class="card" v-if="user.baseInfo.position=='店长'">
                <div class="card-header" id="headingOne">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="iconfont icon-dianpu"></span>
                            快递站
                        </button>
                    </h2>
                </div>
                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/main}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="iconfont icon-zongti"></span>
                            总体信息
                        </a>
                        <a th:href="@{/staff}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="iconfont icon-yuangong"></span>
                            员工管理
                        </a>
                    </div>
                </div>
            </div>

            <div class="card" v-if="user.baseInfo.position=='店长'||user.baseInfo.position=='财务'">
                <div class="card-header" id="headingTwo">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="iconfont icon-caiwu"></span>
                            财务
                        </button>
                    </h2>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/rule}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="iconfont icon-guize"></span>
                            规则计算
                        </a>
                        <a th:href="@{/finance}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="iconfont icon-guize"></span>
                            财务
                        </a>
                    </div>
                </div>
            </div>
            <div class="card" v-if="user.baseInfo.position=='店长'||user.baseInfo.position=='内勤'">
                <div class="card-header" id="headingThree">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                            <span class="iconfont icon-gongzuo"></span>
                            内勤
                        </button>
                    </h2>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/orderPage}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                            <span class="iconfont icon-kuaidi"></span>
                            快递信息
                        </a>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingFour">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                            <span class="iconfont icon-geren7"></span>
                            个人
                        </button>
                    </h2>
                </div>
                <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/job}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour" v-if="user.baseInfo.position=='快递员'||user.baseInfo.position=='财务'||user.baseInfo.position=='内勤'">
                            <span class="iconfont icon-gaiicon-"></span>
                            工作信息
                        </a>
                        <a th:href="@{/account}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                            <span class="iconfont icon-zhanghao"></span>
                            账号信息
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-10 col_page" th:include="include/page/main.html"></div>
    <script>

        $(function(){
            var data4Vue = {
                finance_uri:'finances',
                worker_uri: 'staffByStatus',
                order_uri:'order',
                order_status_uri:'orderStatus',
                uri:'staff',
                work_num:0,
                sleep_num:0,
                packet_finish_num:0,
                packet_stay_num:0,
                packet_send_num:0,
                packet_question_num:0,
                packet_handle_num:0,
                point_data:[],
                user:{baseInfo:{}},
                position:[110.479745,29.128043],
                pixel:{x:0,y:0},
                center: [110.478745,29.128043],//中心点坐标
                map: {},
                markerList:[],
                moneyDate:[],
                moneyInput:[],
                moneyOutput:[],
                staffs:[],
                areas:[],
                rule:{},
            };

            //ViewModel
            var vue = new Vue({
                el: '.main_container',
                data: data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    this.mountInformation();
                    this.clock();
                    this.mountMap();
                    this.mountWorker();
                    this.mountOrder();
                    this.mountMoney();
                },
                methods: {
                    mountInformation:async function () {
                        var url=this.uri+"/"+[[${session.user.sid}]]
                        await axios.get(url).then(function(response) {
                            vue.user=response.data;
                        })
                        await axios.get("rules").then(function (response){
                            vue.rule=response.data;
                        })
                    },
                    mountMap:async function (){
                        this.map=new AMap.Map('container', {
                            zoom:14,//级别
                            center: this.center,
                            viewMode:'2D',//使用3D视图
                            zoomEnable:false,
                            doubleClickZoom:false,
                            keyboardEnable:false,
                            mapStyle: 'amap://styles/macaron', //设置地图的显示样式
                        });
                        await axios.get("staffs/1").then(function (response) {
                            vue.staffs = response.data;
                        })
                        await axios.get("areas").then(function (response) {
                            vue.areas = response.data;
                        })
                        let pointCenter= new AMap.Marker({
                            position:this.position,
                            offset: new AMap.Pixel(this.pixel.x, this.pixel.y),
                            icon: '/pic/public/house.png',
                            title: '快递中心',
                        })
                        this.map.add(pointCenter);//添加到地图
                        for(let bean of this.areas){
                            if(bean.areaName!='未分配区域'){
                                let pointCenter= new AMap.Marker({
                                    position:this.position,
                                    offset: new AMap.Pixel(bean.x, bean.y),
                                    icon: '/pic/public/house.png',
                                    title: bean.areaName,
                                })
                                this.map.add(pointCenter);//添加到地图
                            }

                        }
                        for(let bean of this.staffs){
                            if(bean.status!=0){
                                let zx=bean.area.y/Math.sqrt(Math.pow(bean.area.x,2)+Math.pow(bean.area.y,2))*bean.distance
                                let zy=bean.area.x/Math.sqrt(Math.pow(bean.area.x,2)+Math.pow(bean.area.y,2))*bean.distance
                                let pointWorker= new AMap.Marker({
                                    position:this.position,
                                    offset: new AMap.Pixel(zy,zx),
                                    icon: '/pic/public/car.png',
                                    title: bean.name,
                                })
                                this.markerList.push(pointWorker)
                            }
                        }
                        this.map.add(this.markerList);//添加到地图
                    },
                    mapFlush: async function (){
                        await axios.get("staffs/1").then(function (response) {
                            vue.staffs = response.data;
                        })
                        this.map.remove(this.markerList)
                        this.markerList=[]
                        for(let bean of this.staffs){
                            if(bean.status!=0){
                                let zx=bean.area.y/Math.sqrt(Math.pow(bean.area.x,2)+Math.pow(bean.area.y,2))*bean.distance
                                let zy=bean.area.x/Math.sqrt(Math.pow(bean.area.x,2)+Math.pow(bean.area.y,2))*bean.distance
                                let pointWorker= new AMap.Marker({
                                    position:this.position,
                                    offset: new AMap.Pixel(zy,zx),
                                    icon: '/pic/public/car.png',
                                    title: bean.name,
                                })
                                this.markerList.push(pointWorker)
                            }
                        }
                        this.map.add(this.markerList);//添加到地图
                    },
                    clock:function (){
                        window.setInterval(() => {
                            setTimeout(this.mapFlush, 0)
                        }, 100)
                    },
                    mountWorker:async function () {
                        var work_url = this.worker_uri + "/1";
                        var work2_url = this.worker_uri + "/2";
                        var sleep_url = this.worker_uri + "/0";
                        await axios.get(work_url).then(function (response) {
                            vue.work_num = response.data;
                        })
                        await axios.get(work2_url).then(function (response) {
                            vue.work_num += response.data;
                        })
                        await axios.get(sleep_url).then(function (response) {
                            vue.sleep_num = response.data;
                        })
                        var worker_graph = document.getElementById('worker_graph').getContext('2d');
                        var worker_chart = new Chart(worker_graph, {
                            type: 'pie',
                            data: {
                                labels: ['工作人数', '休息人数'],
                                datasets: [{
                                    label: '员工工作情况图',
                                    data: [vue.work_num, vue.sleep_num],
                                    borderColor: 'lightGray',
                                    backgroundColor: ['pink', 'skyblue'],
                                    borderWidth: 1
                                }]
                            }
                        });
                    },
                    mountOrder:async function (){
                        var packet_graph = document.getElementById('packet_graph').getContext('2d');
                        var packet_stay_url=this.order_status_uri+"/"+new Date().getFullYear()+"/"+(new Date().getMonth()+1)+"/0";
                        var packet_send_url=this.order_status_uri+"/"+new Date().getFullYear()+"/"+(new Date().getMonth()+1)+"/1";
                        var packet_finish_url=this.order_status_uri+"/"+new Date().getFullYear()+"/"+(new Date().getMonth()+1)+"/2";
                        var packet_question_url=this.order_status_uri+"/"+new Date().getFullYear()+"/"+(new Date().getMonth()+1)+"/3";
                        var packet_handle_url=this.order_status_uri+"/"+new Date().getFullYear()+"/"+(new Date().getMonth()+1)+"/4";
                        await axios.get(packet_stay_url).then(function(response) {
                            vue.packet_stay_num=response.data;
                        })
                        await axios.get(packet_send_url).then(function(response) {
                            vue.packet_send_num=response.data;
                        })
                        await axios.get(packet_finish_url).then(function(response) {
                            vue.packet_finish_num=response.data;
                        })
                        await axios.get(packet_question_url).then(function(response) {
                            vue.packet_question_num=response.data;
                        })
                        await axios.get(packet_handle_url).then(function(response) {
                            vue.packet_handle_num=response.data;
                        })
                        var packet_chart = new Chart(packet_graph, {
                            type: 'pie',
                            data: {
                                labels: ['未派送', '派送中','已签收','问题件','已处理'],
                                datasets: [{
                                    label: '快递信息图',
                                    data: [vue.packet_stay_num,vue.packet_send_num,vue.packet_finish_num,vue.packet_question_num,vue.packet_handle_num],
                                    borderColor:'lightGray',
                                    backgroundColor:['grey','skyblue','lightgreen','pink','white'],
                                    borderWidth: 1
                                }]
                            }
                        });
                    },
                    mountMoney:async function (){
                        let url=this.finance_uri;
                        await axios.get(url).then(function(response) {
                            let money=response.data;
                            for(let m of money){
                                let time=new Date(m.date)
                                vue.moneyDate.push(time.getFullYear()+"年"+(time.getMonth()+1)+"月")
                                vue.moneyInput.push(m.income)
                                vue.moneyOutput.push(m.expenditure)
                            }
                        })
                        let now=new Date();
                        var month_packet_num=0;
                        var month_salary=0;
                        var month_packet_fee=0;
                        await axios.get("order/"+now.getFullYear()+"/"+(now.getMonth()+1)).then(function (response) {
                            month_packet_num=response.data;
                        })
                        await axios.get("totalFinance").then(function (response) {
                            month_salary=response.data;
                        })
                        let fee_url="orderFee/"+now.getFullYear()+"/"+(now.getMonth()+1)
                        await axios.get(fee_url).then(function (response){
                            month_packet_fee=response.data;
                        })
                        this.moneyDate.push(now.getFullYear()+"年"+(now.getMonth()+1)+"月")
                        this.moneyInput.push(month_packet_fee)
                        this.moneyOutput.push(this.roundFun(month_packet_fee*this.rule.perFee+month_packet_num*this.rule.oneFee+month_salary,2))
                        let money_graph = document.getElementById('money_graph').getContext('2d');
                        let money_chart = new Chart(money_graph, {
                            type: 'bar',
                            data: {
                                labels:this.moneyDate,
                                datasets: [
                                    {
                                        label: '收入',
                                        data: this.moneyInput,
                                        borderColor:'red',
                                        backgroundColor:'pink',
                                        borderWidth: 1,
                                    },
                                    {
                                        label: '支出',
                                        data: this.moneyOutput,
                                        borderColor:'green',
                                        backgroundColor:'lightgreen',
                                        borderWidth: 1,
                                        fill: false,
                                    },
                                ]
                            }
                        });
                    },
                    roundFun(value, n) {
                        return Math.round(value*Math.pow(10,n))/Math.pow(10,n);
                    }
                }
            });
        });
    </script>
</div>
</body>
</html>
